@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); 
@import url(http://fonts.googleapis.com/earlyaccess/jejugothic.css);




* { margin: 0 auto; padding: 0; vertical-align: top; }
li { list-style: none; }
a { text-decoration: none; }
a:hover{ text-decoration:none; cursor:pointer; }
img { border: 0; max-width: 100%; }
article,aside,canvas,details,figcaption,figure, footer,header,hgroup,menu,nav,section,summary { display:block; }
body { background: #FFF; font-family:  'Nanum Gothic', Tahoma,'Jeju Gothic',"Malgun Gothic", Qrial, sans-serif;  }








#wrap {
width: 1200px;
margin: 0 auto;
border-left: 1px solid #999;
border-right: 1px solid #999;
background: #FFF;
}









/* ===================================================
   🔹 »ó´Ü ¹è³Ê Àüü ¿µ¿ª
   ✔ header¿Í ºÐ¸®µÈ µ¶¸³ ¿µ¿ª
   ✔ ¹ÝÀÀÇü + Áß¾ÓÁ¤·Ä + ÁÙ¹Ù²Þ ¹æÁö
=================================================== */
#top_banner {
  text-align: center;                /* ÅؽºÆ® °¡¿îµ¥ Á¤·Ä */
  white-space: nowrap;               /* ÁÙ¹Ù²Þ ¹æÁö (¸ð¹ÙÀÏ¿¡¼­µµ ÇÑÁÙ À¯Áö) */
  font-weight: 900;                  /* ±ÛÀÚ µÎ²² (°­Á¶ ´À³¦) */


  /* ¹ÝÀÀÇü ÆùÆ® Å©±â
     ÃÖ¼Ò 20px ~ ÃÖ´ë 40px »çÀÌ ÀÚµ¿ Á¶Àý */
  font-size: clamp(20px, 2.8vw, 40px);


  font-family: 'Noto Sans KR', sans-serif !important; /* Ä«Æä24 ÆùÆ® µ¤¾î¾²±â ¹æÁö */
  letter-spacing: -0.5px;            /* ÀÚ°£ »ì¦ ÁÙ¿©¼­ ºÙ´Â ´À³¦ */


  padding: 10px 0;                  /* À§¾Æ·¡ ¿©¹é */


  background: #f8f8f8;              /* ¹è³Ê ¹è°æ»ö */
  border-bottom: 1px solid #ddd;    /* header¿Í ±¸ºÐ¼± */


  overflow: visible;                /* ÅؽºÆ® À߸² ¹æÁö */
}


/* ===================================================
   🔹 Á¿ì ÀÏ¹Ý ÅؽºÆ® ¿µ¿ª
   ✔ °­Á¶µÇÁö ¾ÊÀº ÅؽºÆ®
=================================================== */
#top_banner .tb_left,
#top_banner .tb_right {
  color: #333333;                  /* ±âº» ÅؽºÆ® »ö»ó */
}


/* ===================================================
   🔹 °¡¿îµ¥ °­Á¶ ÅؽºÆ® (ÇÙ½É ¿µ¿ª)
   ✔ µö±×¸° + °ñµå Á¶ÇÕ Àû¿ë (Ãßõ¾È)
   ✔ ¹è°æ + ¿Ü°û¼± + ¾Ö´Ï¸ÞÀ̼Ç
=================================================== */
#top_banner .tb_center {


  /* 🔹 ÅؽºÆ® »ö»ó (°ñµåÅæ) */
  color: #ffe066;


  /* 🔹 ¹è°æ »ö»ó (µö±×¸°) */
  background: #0f6b63;


  padding: 4px 12px;              /* ³»ºÎ ¿©¹é */
  border-radius: 6px;             /* ¸ð¼­¸® µÕ±Û°Ô */


  display: inline-block;          /* ¹è°æÀÌ ±ÛÀÚ Å©±â¿¡ ¸Â°Ô */
  margin: 0 10px;                 /* ÁÂ¿ì °£°Ý */


  /* 🔹 ¿Ü°û¼± È¿°ú (ÅؽºÆ® °­Á¶) */
  text-shadow:
    -2px -2px 0 #000,
     2px -2px 0 #000,
    -2px  2px 0 #000,
     2px  2px 0 #000,
     0px -2px 0 #000,
     0px  2px 0 #000,
    -2px  0px 0 #000,
     2px  0px 0 #000;


  /* 🔹 ¾Ö´Ï¸ÞÀÌ¼Ç (ºÎµå·¯¿î ±ôºýÀÓ È¿°ú) */
  animation: flashGreen 1.2s infinite !important;
}


/* ===================================================
   🔹 ±ôºýÀÓ ¾Ö´Ï¸ÞÀÌ¼Ç (µö±×¸° ¹öÀü)
   ✔ ¹è°æ + ¹à±â ÀÚ¿¬½º·´°Ô º¯È­
=================================================== */
@keyframes flashGreen {


  /* ±âº» »óÅ */
  0% {
    opacity: 1;
    filter: brightness(1);
    background: #0f6b63;
  }


  /* °­Á¶ »óÅ */
  50% {
    opacity: 0.75;
    filter: brightness(1.4);
    background: #0c5c55;  /* »ì¦ ´õ ¾îµÎ¿î ±×¸° */
  }


  /* º¹±Í */
  100% {
    opacity: 1;
    filter: brightness(1);
    background: #0f6b63;
  }
}







/* ===================================================
   🔹 Áß¾Ó ¹è³Ê Àüü
=================================================== */
#center_banner {
  text-align: center;
  background: #0f3d2e;                /* ´ÙÅ©±×¸° */
  padding: 30px 0;
  font-family: 'Noto Sans KR', sans-serif !important;
}




/* ===================================================
   🔹 °øÅë ÅؽºÆ®
=================================================== */
#center_banner p {
  margin: 0;
  font-weight: 900;
  line-height: 1.4;
}




/* ===================================================
   🔹 1ÁÙ (Å« ÅؽºÆ®)
=================================================== */
#center_banner .cb_line1 {
  font-size: clamp(28px, 3.5vw, 60px);




  /* ¾Ö´Ï¸ÞÀÌ¼Ç */
  animation: line1_show 2.8s infinite;
  animation-timing-function: ease-out; /* ºÎµå·¯¿î ³¡ ó¸® */
}




/* ===================================================
   🔹 2ÁÙ (¼­ºê ÅؽºÆ®)
=================================================== */
#center_banner .cb_line2 {
  font-size: clamp(22px, 3vw, 60px);
  margin-top: 8px;




  /* ¾Ö´Ï¸ÞÀÌ¼Ç */
  animation: line2_show 2.8s infinite;
  animation-timing-function: ease-out;
}




/* ===================================================
   🔹 ±âº» ÅؽºÆ®
=================================================== */
#center_banner .cb_normal {
  color: #ffffff;
}




/* ===================================================
   🔹 °­Á¶ »ö»ó
=================================================== */
#center_banner .cb_red {
  color: #ff3b3b;
}




#center_banner .cb_yellow {
  color: #ffe600;
}




#center_banner .cb_orange {
  color: #ff8c00;
}




/* ===================================================
   🔹 1ÁÙ ¾Ö´Ï¸ÞÀ̼Ç
   ✔ ¾Æ·¡¿¡¼­ ÀÚ¿¬½º·´°Ô ¿Ã¶ó¿À¸ç µîÀå
=================================================== */
@keyframes line1_show {
  0% {
    opacity: 0;
    transform: translateY(12px);  /* ¾Æ·¡¿¡¼­ ½ÃÀÛ */
  }




  20% {
    opacity: 1;
    transform: translateY(0);     /* ÀÚ¿¬½º·´°Ô ¿Ã¶ó¿È */
  }




  100% {
    opacity: 1;
    transform: translateY(0);
  }
}




/* ===================================================
   🔹 2ÁÙ ¾Ö´Ï¸ÞÀ̼Ç
   ✔ 1ÁÙ ÀÌÈÄ µîÀå
=================================================== */
@keyframes line2_show {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }




  40% {
    opacity: 0;
    transform: translateY(12px);  /* ´ë±â */
  }




  65% {
    opacity: 1;
    transform: translateY(0);     /* µîÀå */
  }




  100% {
    opacity: 1;
    transform: translateY(0);
  }
}






/* ===================================================
   🔹 ÇÏ´Ü ¹è³Ê Àüü ¿µ¿ª
   ✔ footer À§ À§Ä¡
   ✔ 3ºÐÇÒ ±¸Á¶
   ✔ ÁÂ¿ì ¿©¹é Å©°Ô / Áß°£ °£°Ý Á¼°Ô
=================================================== */
#bottom_banner {
  display: flex;
  justify-content: center;




  gap: 10px;                /* Áß°£ °£°Ý */
  padding: 20px 40px;       /* ÁÂ¿ì ¿©¹é Å©°Ô */




  background: #ffffff;
}




/* ===================================================
   🔹 °¢ ¹Ú½º °øÅë ½ºÅ¸ÀÏ
=================================================== */
#bottom_banner .bb_item {
  flex: 1;
  text-align: center;




  font-weight: 900;
  font-size: clamp(20px, 2.5vw, 60px);
  font-family: 'Noto Sans KR', sans-serif !important;




  padding: 14px 0;
  border-radius: 8px;
}




/* ===================================================
   🔹 »ö»ó ¼³Á¤
=================================================== */




/* 1¹ø: ´ë´ÜÁö (ûº¸¶ó + ¿¤·Î¿ì) */
#bottom_banner .bb_1 {
  background: #51138a;
  color: #ffe600;
}




/* 2¹ø: Àڰݹ« (¹ÎÆ® + È­ÀÌÆ® ¡æ ¿äû ¼öÁ¤ ¹Ý¿µ: ¿ÍÀÎÅæ ÅؽºÆ®) */
#bottom_banner .bb_2 {
  background: #28ebbd;
  color: #7a1f2b;
}




/* 3¹ø: ¼±Âø¼ø (´ÙÅ©±×¸° + È­ÀÌÆ®) */
#bottom_banner .bb_3 {
  background: #1f4d3a;
  color: #ffffff;
}




/* ===================================================
   🔹 ¾Ö´Ï¸ÞÀÌ¼Ç °øÅë ¼³Á¤
   ✔ Àüü È帧 µ¿ÀÏÇÏ°Ô ¸ÂÃã
=================================================== */
#bottom_banner .bb_1,
#bottom_banner .bb_2,
#bottom_banner .bb_3 {
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}




/* ===================================================
   🔹 1¹ø ¾Ö´Ï¸ÞÀ̼Ç
   ✔ ¸ÕÀú µîÀå ¡æ °è¼Ó À¯Áö
=================================================== */
#bottom_banner .bb_1 {
  animation-name: bb_step1;
}




@keyframes bb_step1 {
  0%   { opacity: 0; }
  10%  { opacity: 1; }   /* µîÀå */
  100% { opacity: 1; }   /* ³¡±îÁö À¯Áö */
}




/* ===================================================
   🔹 2¹ø ¾Ö´Ï¸ÞÀ̼Ç
   ✔ µÎ¹ø° µîÀå
=================================================== */
#bottom_banner .bb_2 {
  animation-name: bb_step2;
}




@keyframes bb_step2 {
  0%   { opacity: 0; }
  25%  { opacity: 0; }
  35%  { opacity: 1; }   /* µîÀå */
  100% { opacity: 1; }
}




/* ===================================================
   🔹 3¹ø ¾Ö´Ï¸ÞÀ̼Ç
   ✔ ¸¶Áö¸· µîÀå ¡æ Àüü ¿Ï¼º
=================================================== */
#bottom_banner .bb_3 {
  animation-name: bb_step3;
}




@keyframes bb_step3 {
  0%   { opacity: 0; }
  50%  { opacity: 0; }
  60%  { opacity: 1; }   /* µîÀå */
  100% { opacity: 1; }
}










/* #header */
#header {
width: 100%;
}




#m_top{
display:none;
width:100%;
height: 5px; 
background:#333;
}




#logo {
width: 100%;
background: #333;
}




#logo2 {
display: none; 
width: 100%; 
overflow: hidden; 
background:#FFF; 
margin-top:10px;
}




.logo2_button {
float: left; 
width:20%; 
margin:top 0; 
text-align:center; 
} 




.logo2_text {
float: left; 
width: 60%; 
left: 0 ;
}




.logo2_tel {
float: left; 
width:20%; 
margin:top 0; 
text-align:center; 
} 








#top_tel{
width: 100%;
height: 60px;
margin-top: 20px;
margin: 0 auto;
background:#ffeb3b;
line-height:60px;
text-align:center;
}




#top_tel a{
text-align: center;
font-size: 2em;
color: #000;
font-weight: normal;
font-style: normal;
line-height:60px;
height: 60px;
line-height:60px;
}




#top_tel a span{
font-weight: bold; color:#000; font-size: 2em; 
}




#nav {
background:#000;
width: 100%;
}




#nav ul { overflow: hidden; }
#nav ul li { float: left; height:80px; width: 240px;}
#nav ul li a {
display: block;
line-height:80px;
font-size: 2em; /* 18 / 16 */
color: #FFF;
background:#006666;
text-align: center;
}
#nav ul li a:hover {
color: #FFF;
background: #333;
}




#s_nav { 
display: block; 
width: 240px; 
height: 100%; 
margin: 0 auto; 
padding-top: 20px;
position: absolute;
z-index: 999;
top: 0;
left:-300px; 
background:#000;
}




.snav_no {
text-align: right; 
margin-right: 5px; 
}




h1 { 
font-size: 1.250em; 
line-height: 1.7em;
margin-bottom: 20px; 
font-weight: bold; 
letter-spacing: -0.03em;
color: #FFFFFF;
text-shadow:1px 1px 1px rgb(0,0,0); behavior:url('www/base/img/homepage/PIE-1.0.0/PIE.htc');
text-align: center;
}




#snav {
display: block;
}




#snav>ul{ 
width: 234px;
margin: 0 auto; 
}




#snav > ul>li{
height:30px;
border-bottom: 1px solid #BDBDBD; 
background:#333;
}




#snav >ul> li > a { 
display: block;
line-height: 30px;
padding-left: 18px; 
font-size: 1em; 
color: #FFF; 
text-decoration: none;
}




#full {
width: 100%; 
height: 100%;
position: absolute; 
top: 0;
left: 0;
z-index: 800;
background: transparent; 
display:none;
}
















/* #contents */




#img_box {
position: relative;
}
#contents {
width: 100%;
margin: 0 auto;
}




#title_top{
width: 100%; 
height: 100px;
margin: 0 auto;
}




.title_top{
text-align: center;
font-size: 3em;
color: #000;
font-weight: bold;
font-style: normal;
line-height: 100px;
}








#title{
width: 100%; 
height: 100px;
margin: 0 auto;
margin-top:5px;
background: #006666;
}
.title{
text-align: center;
font-size: 3em;
color: #FFF;
font-weight: bold;
font-style: normal;
line-height: 100px;
}
#content_img{
width: 100%; 
margin: 0 auto;
margin-top:5px;
background: #FFF;
text-align:center;
}
#content_img img{
margin-top:5px;
}








/*main-contents*/




#mainbn1{ 
width: 100%; 
overflow: hidden; 
margin-top:30px; 
margin-bottom: 10px; 
background:#FFF;
text-align:center;
}




#main-left1{
width:30%; 
float: left;
margin-left: 2.5%; 
margin-right:1.25%; 
}




#main-center1{
width:30%; 
float: left;
margin-left: 1.25%; 
margin-right: 1.25%; 
}




#main-right1{
width:30%; 
float: left; 
margin-left: 1.25%; 
margin-right: 2.5%; 
}








#main-title1{ 
text-align:center;
 float: none;
width: 100%; 
height: 100px;
}




#main-title1 a{ 
text-align: center;
line-height:100px;
font-size: 3em;
color: #000;
font-weight: bold;
font-style: normal;
}




#main-content_img1 {
 float: none;
width:100%;
}








#mainbn{ 
width: 100%; 
overflow: hidden; 
margin-top:30px; 
background:#F2FFED;
text-align:center;
}




#main-left{
width:40%;
float: left; 
margin-left: 7.5%; 
margin-right:2.5%;
margin-top:30px; 
}




#main-right{
width:40%;
float: left; 
margin-left: 2.5%; 
margin-right:7.5%; 
margin-top:30px; 
}




#main-title{ 
text-align:center;
 float: none;
width: 100%; 
height: 100px;
}




#main-title a{ 
text-align: center;
line-height:100px;
font-size: 3em;
color: #000;
font-weight: bold;
font-style: normal;
}




#main-content_img{
 float: none;
width:100%;
}












/*#community*/
#community{
top:150px; 
right:350px;
width: 100%;   
margin:0 auto;
clear: both;
}








#footer {
padding: 10px 0;
text-align: center;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
}
.footer{
width: 100%;
height: 60px;
margin-top: 20px;
margin: 0 auto;
line-height:60px;
text-align:center;
}
.footer a{
text-align: center;
font-size: 2em;
color: #000;
font-weight: normal;
font-style: normal;
padding: 10px;
height: 60px;
line-height:60px;
}








@media screen and (max-width:1024px) {
#wrap { width: 100%; border-left: none; border-right: none; }
#nav ul li { width: 20%; }
#nav ul li a {width: 100%;}
#top_tel a{font-size: 1.5em;}
#top_tel a span{font-size: 1.5em; }
}












@media screen and (max-width:768px) {
#img_box {  }
#text_box { top: 40px; right: 45px; }
.text_box3 { display: none; }
#title{height:auto;}
.title{font-size: 1.5em; margin: 5 0 5 0;}
#text_box { top: 40px; right: 45px; }
.text_box3 { display: none; }
#main-title1 a{font-size: 1em;line-height: none; height: auto;}
#main-title1{ height: auto;}
#main-title a{font-size: 1em; line-height: none; height: auto; }
#main-title{ height: auto;}
}








@media screen and (max-width:550px) {
#logo{display:none;}
#logo2{display:block;}
#top_tel a{font-size: 1em;}
#top_tel a span{font-size: 1.5em; }
#nav {display:none;}
#mainbn{ width: 100%; margin-top:15px; }
}